<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>模态框拖拽</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        user-select: none; /*防止双击选择到文本*/
    }

    html,
    body {
        width: 100%;
        height: 100%;
    }

    button {
        width: 100px;
        height: 40px;
        color: #409eff;
        border-radius: 4px;
        border: 1px solid #b3d8ff;
        background: #ecf5ff;
        cursor: pointer;
    }

    button:hover {
        color: #fff;
        border-color: #409eff;
        background: #409eff;
    }
  
    .open {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    /* 遮罩层的样式*/
    .model-wrapper {
        display: none;/*初始状态是隐藏的*/
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.4);
    }

    /*模态框的样式,初始状态让模态框定位在浏览器中间*/
    .model-wrapper .model-box {
        position: absolute;
        left: calc(50% - 150px);
        top: 100px;
        width: 300px;
        height: 250px;
        border-radius: 5px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
        background: #ffff;
    }
      /*头部盒子的样式*/
    .model-wrapper .model-box .title {
        height: 50px;
        line-height: 50px;
        display: flex;
        padding: 0 20px;
        justify-content: space-between;
        cursor: move;
        border-bottom: 1px solid #ddd;
    }

    .model-wrapper .model-box .title i {
        font-size: 30px;
        color: #000;
        cursor: pointer;
    }

    .content {
        padding: 0 20px;
    }

    .content .form-input {
        margin: 20px 0;
    }

    .content .form-input input {
        width: 100%;
        height: 42px;
        padding: 0 5px;
        margin-top: 20px;
        border: 1px solid #dcdfe6;
    }
</style>

<body>

    <button class="open">登录</button>
    <!-- 定义遮罩层 -->
    <div class="model-wrapper">

        <div class="model-box">

            <div class="title">
                <span>用户</span>
                <i class="close">x</i>
            </div>

            <div class="content">

                <div class="form-input">
                    <label for="username">请输入:</label>
                    <input type="text" id="username">
                </div>

                <div class="form-input">
                    <button class="submit">提交</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    //获取到需要用到的Dom元素
    
    //获取模态框可移动的头部区域
    var title = document.querySelector('.title');

    //获取模态框主区域
    var modelBox = document.querySelector('.model-box');
    //获取到登录按钮
    var open = document.querySelector('.open');
    //获取叉号
    var close = document.querySelector('.close');  
    //获取遮罩层
    var modelWrapper = document.querySelector('.model-wrapper');
    //获取到提交按钮
    var submit =document.querySelector('.submit')

    //绑定点击事件
    open.onclick = function () {
        modelWrapper.style.display = 'block';
    }
    close.onclick = function () {
        modelWrapper.style.display = 'none';
    }
    submit.onclick = function(){
        modelWrapper.style.display = 'none';
    }
    modelWrapper.onclick = function () {
        modelWrapper.style.display = 'none';
    }


    // // 阻止浏览器的冒泡事件 防止触发其他点击事件
    modelBox.onclick = function (e) {
        // var e = e || window.event
        if (e.stopPropagation) {

            e.stopPropagation()
        } else {
            // 阻止冒泡的兼容写法
            e.cancelBubble = true
            // 取消 冒泡
        }
    }
    //给title(头部盒子)绑定鼠标事件
    title.onmousedown = function (e) {

        var x = e.clientX - modelBox.offsetLeft;   //鼠标当前距离浏览器左侧的水平距离  减去  当前模态框距离浏览左侧的水平距离  等于 当前鼠标在模态框中左侧的距离 这个值用一个参数x接收

        var y = e.clientY - modelBox.offsetTop;     //同理得到当前鼠标在模态框顶部的距离 这个值用一个参数y接收
        // console.log(x,y)
      
        document.onmousemove = function (e) {

       modelBox.style.left = e.clientX - x + 'px';  //当前鼠标距离浏览器左侧水平距离的值  减去 上面保存的变量x(当前鼠标距离模态框左侧的距离)  等于 模态框距离浏览器左侧的水平距离  在通过赋值给到模态框的left属性，实现拖拽效果

       modelBox.style.top = e.clientY - y + 'px';  //同理得到模态框距离浏览器顶部的垂直距离  在通过赋值给到模态框的top属性，实现垂直拖拽效果
            console.log(modelBox.style.left, modelBox.style.top)
        }
    }
    document.onmouseup = function () {
        document.onmousemove = null;
    }
   //当鼠标弹起时候，通过赋值null的方式取消鼠标移动事件（也可以说是取消鼠标跟随事件）
</script>